<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 导航栏 -->
    <div class="home-navbar">
      <div class="navbar_1">
        <van-grid
          :column-num="3"
          :gutter="11"
          :border="false"
          style="padding-left: 0"
        >
          <van-grid-item text="入驻商务部" @click="$router.push('/settled')">
          </van-grid-item>
          <van-grid-item text="家政求职"> </van-grid-item
          ><van-grid-item
            text="找家庭服务"
            style="padding-right: 0"
            @click="$router.push('/service')"
          >
          </van-grid-item
          ><van-grid-item
            text="家政服务标准"
            @click="$router.push('/standard')"
          >
          </van-grid-item
          ><van-grid-item text="线上家政保险"> </van-grid-item
          ><van-grid-item text="合同 " style="padding-right: 0">
          </van-grid-item>
        </van-grid>
      </div>
      <div class="navbar_2">
        <div>
          <div class="top" style="background-image">
            <van-icon name="smile-o" />
          </div>
          <span>月嫂</span>
        </div>
        <div>
          <div class="top"><van-icon name="award-o" /></div>
          <span>育婴师</span>
        </div>
        <div>
          <div class="top"><van-icon name="underway-o" /></div>
          <span>保洁/清洁</span>
        </div>
        <div>
          <div class="top"><van-icon name="info-o" /></div>
          <span>保姆</span>
        </div>
        <div>
          <div class="top"><van-icon name="gem-o" /></div>
          <span>月嫂</span>
        </div>
        <div>
          <div class="top"><van-icon name="gift-o" /></div>
          <span>育婴师</span>
        </div>
        <div>
          <div class="top"><van-icon name="thumb-circle-o" /></div>
          <span>保洁/清洁</span>
        </div>
        <div>
          <div class="top"><van-icon name="fire-o" /></div>
          <span>保姆</span>
        </div>
      </div>
    </div>
    <!-- 认证公司 -->
    <Frim :frimList="frimList" />
    <!--家政服务人员  -->
    <ServiceStaff :StaffList="StaffList" />
    <!-- 回到顶层按钮 -->
    <button class="btn" v-show="btnShow" @click="goTop">
      <van-icon name="back-top" size="20" />
    </button>
  </div>
</template>

<script>
import Frim from "@/component/frim/frim.vue";
import ServiceStaff from "@/component/serviceStaff/serviceStaff.vue";
import { frimList } from "@/api/frim";
import { getStaff } from "@/api/staff";
export default {
  data() {
    return {
      images: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F1102%252Fd509baf1j00r1xv2i001ud200u000bmg00it007a.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654158514&t=1bf6f3a15d65b940d4931602947f4966",
        "https://img1.baidu.com/it/u=2823016868,309484820&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.51wendang.com%2Fpic%2Ff3c9479e000e62f08ad0b522131e26f356cd0b0a%2F1-810-jpg_6-1439.82-0-0-1439.82.jpg&refer=http%3A%2F%2Fwww.51wendang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654158542&t=01a8dea015581241594aa50c5c36dcd3",
        "https://img0.baidu.com/it/u=1058947700,2762431238&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500",
      ],
      frimList: [],
      StaffList: [],
      btnShow: false,
      scrTop: 0,
      shake: true,
    };
  },
  components: { Frim, ServiceStaff },
  created() {
    this.getFrimMessage();
    this.getServiceStaff();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true); //监听滚动条
  },
  methods: {
    //获取公司信息
    async getFrimMessage() {
      const { data } = await frimList();
      this.frimList = data;
    },
    // 获取家政人员信息
    async getServiceStaff() {
      const { data } = await getStaff();
      this.StaffList = data;
    },
    handleScroll() {
      if (document.documentElement.scrollTop >= 200) {
        this.btnShow = true;
      } else {
        this.btnShow = false;
      }
    },
    // 回到顶部
    goTop() {
      if (this.shake) {
        this.shake = false;
        this.scrTop = document.documentElement.scrollTop;
        var timer = setInterval(() => {
          this.scrTop -= 10;
          document.documentElement.scrollTop = this.scrTop;
          if (document.documentElement.scrollTop  === 0) {
            clearInterval(timer);
            this.shake = true;
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.home {
  background-color: #f9f5f5c2;
  .swipe {
    height: 320px;
    padding: 0 32px;
    background-color: #3f51b5;
    /deep/.van-swipe__track {
      height: 280px;

      img {
        width: 100%;
        height: 280px;
      }
    }
  }
  // 导航栏
  .home-navbar {
    margin-top: 10px;
    height: 810px;
    padding: 36px 32px 0;
    margin-bottom: 20px;
    background-color: #fff;
    .navbar_1 {
      .van-grid {
        width: 100%;
        padding-bottom: 28px;
        .van-grid-item {
          height: 174px;
          cursor: pointer;
          /deep/.van-grid-item__content {
            border-radius: 15px;
            background: url("~@/assets/1.png") center center;
            .van-grid-item__text {
              font-size: 26px;
              color: white;
              font-weight: 550;
            }
          }
        }
      }
    }
    .navbar_2 {
      display: flex;
      justify-content: space-between;
      // align-items: center;
      flex-flow: wrap;
      div {
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
        .top {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 110px;
          height: 110px;
          border-radius: 110px;
          background-color: #eeecec;
          margin-bottom: 24px;
          .van-icon {
            color: #979191;
            font-size: 60px;
          }
        }
        span {
          font-size: 20px;
          font-weight: 600;
        }
      }
    }
  }
  .btn {
    position: fixed;
    right: 10px;
    bottom: 200px;
    width: 60px;
    height: 60px;
    border-radius: 35px;
    border: 0;
    opacity: 0.5;
    z-index: 3;
  }
}
</style>
